<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>009_div跟随鼠标移动</title>
    <style type="text/css">
        #box1 {
            width: 20px;
            height: 20px;
            background-color: yellowgreen;

            position: absolute; /*开启元素的绝对定位*/
        }
    </style>
</head>
<body style="height: 1000px">
    <div id="box1"></div>

<script type="text/javascript">
    /**
     *
     * 功能：使div能够跟随div移动
     */
    var box1 = document.getElementById("box1");


    document.onmousemove = function (event) {
        // 解决浏览器兼容问题
        if(!event) {
            event = window.event;
        }


        /**
         *
         * 获取滚动条滚动的距离
         *  chrome认为浏览器的滚动条是body的，可以通过body.scrollTop获取到
         *  火狐等浏览器认为浏览器的滚动条是html的
         */
        var st = document.body.scrollTop || document.documentElement.scrollTop; // 同时处理火狐和chrome的兼容性问题
        var sl = document.body.scrollLeft || document.documentElement.scrollLeft;

        // 获取鼠标的坐标

        /**
         *  clientX和clientY：
         *      用于获取鼠标在当前窗口的坐标
         *  pageX和pageY
         *      可以获取鼠标相对于当前页面的坐标,但是这两个属性在IE8中不支持，所以需要兼容IE8则不要使用这两参数
         */
        var left = event.clientX;
        var top = event.clientY;

        // 设置div的偏移量, 只对开启了定位的元素有作用
        box1.style.left = left + sl+"px";
        box1.style.top = top + st + "px";
    }
</script>
</body>
</html>